<template>
  <div class="dashboard-container">
    <div class="filter-container">
      <el-row :gutter="10" style="width:100%">
        <el-col :span="6">
          <el-select
            v-model="listQuery.user_id"
            clearable
            filterable
            placeholder="选择账户"
            @change="reloadList"
          >
            <el-option v-for="(item, index) in memberList" :key="index" :label="item.username" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select
            v-model="listQuery.status"
            clearable
            placeholder="选择状态"
            @change="reloadList"
          >
            <el-option label="待审核" :value="0" />
            <el-option label="已通过" :value="1" />
            <el-option label="已拒绝" :value="2" />
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-date-picker
            v-model="listQuery.created"
            style="width: 100%;"
            type="datetimerange"
            range-separator="~"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          />
        </el-col>

      </el-row>
      <el-row style="margin-top:10px">
        <div style="display:flex">
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="reloadList"
          >搜索</el-button>
          <el-button
            class="filter-item"
            type="primary"
            style="margin-left: 10px;"
            icon="el-icon-document-add"
            @click="addNews"
          >
            添加
          </el-button>
          <download-excel
            style="margin-left:10px"
            class="export-excel-wrapper"
            :fetch="importPackageList"
            :fields="json_fields"
            type="xls"
            worksheet="My Worksheet"
            name="账单调整"
            :before-generate="startDownload"
            :before-finish="finishDownload"
          >
            <el-button type="primary">导 出</el-button>
          </download-excel>
        </div>

      </el-row>

    </div>
    <div style="padding:0 20px">

      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        height="calc(100vh - 250px)"
        style="width: 100%;"
        size="mini"
        border
        tooltip-effect="dark"
        :header-cell-style="{ background: '#eaf1fd', color: '#333' }"
      >
        <el-table-column
          label="用户昵称"
          min-width="150px"
          prop="user.username"
        />
        <el-table-column
          label="原额度"
          width="150px"
          prop="credit_amount_start"
        />
        <el-table-column
          label="原额度已用"
          width="150px"
          prop="credit_use"
        />
        <el-table-column
          label="新额度"
          width="150px"
          prop="credit_amount_end"
        />
        <el-table-column
          label="申请原由"
          width="250px"
          prop="remark"
        />
        <el-table-column
          label="拒绝原因"
          width="250px"
          prop="refuse_reason"
        />
        <el-table-column label="状态" prop="tid" width="100">
          <template #default="{ row }">
            <div>
              <span v-if="row.status == 0">待审核</span>
              <span v-if="row.status == 1" style="color: #409EFF;">已通过</span>
              <span v-if="row.status == 2" style="color: red;">已拒绝</span>

            </div>
          </template>
        </el-table-column>
        <el-table-column label="申请时间" prop="add_time" width="150" />
        <el-table-column
          label="审核人"
          width="150px"
          prop="operator"
        />
        <el-table-column
          label="审核时间"
          width="150px"
          prop="updated"
        />

        <el-table-column fixed="right" label="操作" prop="addtime" width="100">
          <template #default="{ row }">
            <el-button v-if="row.status == 0" type="primary" @click="fqorder(row)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </div>
    <Detial :detial="detial" :status="status" :member-list="memberList" :visible="visible" @update="closeDraw" @reload="reloadList" />

    <el-dialog
      title="审批"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="handleClose"
    >
      <div style="padding:20px">
        <el-form ref="ruleForm" :model="form" label-width="120px" class="demo-ruleForm">
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="用户昵称:" prop="user_id">
                <el-input
                  v-model="form.user.username"
                  disabled
                  placeholder="用户昵称"
                />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="原额度:" prop="credit_end">
                <el-input
                  v-model="form.credit_amount_start"
                  disabled
                  placeholder="原额度"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="原额度已用:" prop="credit_end">
                <el-input
                  v-model="form.credit_use"
                  disabled
                  placeholder="原额度已用"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="新额度:" prop="credit_end">
                <el-input
                  v-model="form.credit_amount_end"
                  disabled
                  placeholder="新额度"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="申请原由:" prop="remark">
                <el-input v-model="form.remark" disabled type="textarea" placeholder="申请原由" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="拒绝原因:" prop="remark">
                <el-input v-model="refuse_reason" type="textarea" placeholder="拒绝原因" />
                <div style="color:red;font-size:12px">
                  如拒绝,请填写拒绝原因
                </div>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="throwIt()">审批拒绝</el-button>
        <el-button type="primary" @click="refuseIt()">审批通过</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listLog, refuse, throwCredit } from '@/api/finance/index'
import { listUser } from '@/api/user/index'

import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import Detial from './components/creditDetial.vue'
import _ from 'lodash'
export default {
  name: 'Dashboard',
  components: {
    Pagination,
    Detial
  },
  data() {
    return {
      dialogVisible: false,
      data_arr: [],
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        status: '',
        user_id: '',
        created: []
      },
      visible: false,
      status: 1,
      id: '',
      detial: {},
      message: '',
      memberList: [],
      AdjustTypeList: [],
      selectList: [],
      form: {
        user: {}

      },
      refuse_reason: '',
      json_fields: {
        用户昵称: 'user.username',
        原额度: 'credit_amount_start',
        原额度已用: 'credit_use',
        新额度: 'credit_amount_end',
        申请原由: 'remark',
        拒绝原因: 'refuse_reason',

        状态: {
          field: 'status',
          // 自定义回调函数
          callback: value => {
            if (value === 1) return '已通过'
            if (value === 0) return '待审核'
            if (value === 2) return '已拒绝'
          }
        },
        申请时间: 'add_time',
        审核人: 'operator',
        审核时间: 'updated'
      }

    }
  },
  computed: {
  },
  created() {
    this.getList()
    this.getMemberList()
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
    },
    handleSelectionChange(val) {
      this.selectList = val
    },
    getMemberList() {
      listUser({
        status: 1,
        limit: 9999999
      }).then(res => {
        this.memberList = res.data.data
      })
    },
    closeDraw() {
      this.visible = false
    },
    addNews() {
      this.status = 1
      this.visible = true
    },
    edit(row) {
      this.detial = { ...row }
      this.status = 2
      this.visible = true
    },
    reloadList() {
      this.listQuery.page = 1
      this.visible = false
      this.getList()
    },
    getList() {
      this.listLoading = true
      listLog(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.count
        this.listLoading = false
      })
    },
    selectable(row, index) {
      if (row.status === 1) {
        return false
      } else {
        return true
      }
    },
    // 审核弹框
    fqorder(row) {
      this.form = row
      this.refuse_reason = ''
      this.dialogVisible = true
    },
    // 审批拒绝
    throwIt() {
      refuse({
        credit_log_id: this.form.credit_log_id,
        reason: this.refuse_reason
      }).then(res => {
        this.$message.success(res.msg)
        this.dialogVisible = false
        this.getList()
      })
    },
    // 审批通过
    refuseIt() {
      throwCredit({
        credit_log_id: this.form.credit_log_id
      }).then(res => {
        this.$message.success(res.msg)
        this.dialogVisible = false
        this.getList()
      })
    },
    // 导出
    getPageSize() {
      return new Promise((resolve, reject) => {
        listLog(this.listQuery).then(response => {
          resolve(response.data.count)
        })
      })
    },
    getExcelList(page) {
      const param = _.cloneDeep(this.listQuery)
      param.page = page
      return new Promise((resolve, reject) => {
        listLog(param).then(response => {
          response.data.list.forEach(item => {
            item.mobile = '+' + _.get(item.user, 'area_code', '') + ' ' + _.get(item.user, 'mobile', '')
          })
          resolve(response.data.list)
        })
      })
    },
    async importPackageList() {
      const total = await this.getPageSize()
      const page = Math.ceil(total / this.listQuery.limit)
      var data = []
      for (let i = 1; i <= page; ++i) {
        data = data.concat(await this.getExcelList(i))
      }
      return data
    },
    startDownload() {
      this.loadingExcel = this.$loading({
        lock: true,
        text: '导出表格中，请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    finishDownload() {
      this.loadingExcel.close()
    }
  }
}
</script>
<style scoped>
.filter-container{
  padding:20px 20px 10px;
}

.upload-demo{
  margin: 20px 0 10px;
}
</style>
